<template>
  <div class="i-emoji">
    <div class="emoji-icon">
      <el-popover
        :placement="placement"
        :width="width"
        trigger="click"
      >
        <span
          v-for="(item, index) in emotions"
          :key="index"
        >
          <span
            v-html="dillText(`[${item}]`)"
            @click="handleEmojiClick(item)"
          />
        </span>
        <div
          class="btn el-button--primary"
          type="primary"
          slot="reference"
        >
          <span class="icon iconfont icon-biaoqing"></span>
        </div>
      </el-popover>
      <slot />
    </div>
    <div class="i-emoji-input">
      <el-input
        placeholder="请输入要发送的消息"
        v-model="value"
        @input="$emit('update', value)"
        @keydown.enter.native="$emit('enter', value)"
      />
      <el-button
        type="primary"
        @click="$emit('click', value)"
      >
        发送
      </el-button>
    </div>
  </div>
</template>

<script>
import { emotions, dillText } from '@/utils/emotion'
export default {
  name: 'Emoji',
  model: {
    prop: 'val',
    event: 'update'
  },
  props: {
    val: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '400'
    },
    placement: {
      type: String,
      default: 'top'
    }
  },
  data () {
    return {
      value: this.val,
      emotions,
      dillText
    }
  },
  watch: {
    val: {
      immediate: true,
      handler (newVal) {
        this.value = newVal
      }
    }
  },
  methods: {
    handleEmojiClick (emoji) {
      this.value += `[${emoji}]`
      this.$emit('update', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.i-emoji {
  height: 90px;
  width: 100%;
  padding: 10px 0px;
  .emoji-icon {
    border-radius: 50%;
    margin-bottom: 10px;
    display: flex;
    .btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .smile {
        width: 16px;
        height: 16px;
      }
    }
  }
  .i-emoji-input {
    display: flex;
  }
}
</style>
